# SvelteKit

Este guia será para:

1. Minimal Installation Steps - The steps needed to get a minimum Wails setup working for SvelteKit.
2. Script de Instalação - Bash script para cumprir os passos de Instalação Mínima com a marca opcional de Wails.
3. Notas importantes - Problemas que podem ser encontrados ao usar o SvelteKit + Wails e correções.

## 1. Passos mínimos de instalação

##### Instalar Wails para Svelte.

- `wails init -n myapp -t svelte`

##### Exclua o front-end do Svelte.

- Navegue até a pasta myapp recém-criada.
- Excluir a pasta chamada "frontend"

##### Enquanto estiver na raiz do projeto Wails. Use the Svelte CLI to create a SvelteKit project as the new frontend. Follow the prompts, nothing Wails specific is needed here.

- `npx sv create frontend`

##### Modificar o wails.json.

- Add `"wailsjsdir": "./frontend/src/lib",` Observe que é aqui que suas funções Go e runtime aparecerão.
- Mude o frontend do seu gerenciador de pacotes se não estiver usando npm.

##### Modificar o main.go.

- O primeiro comentário `//go:embed all:frontend/dist` precisa ser alterado para `//go:embed all:frontend/build`

##### Modify .gitignore

- The line `frontend/dist` needs to be replaced with `frontend/build`

##### Instalar/remover dependências usando seu gerenciador de pacote favorito.

- Entre na sua pasta "frontend".
- `npm i`
- `npm uninstall @sveltejs/adapter-auto`
- `npm i -D @sveltejs/adapter-static`

##### Alterar adaptador em svelte.config.js

- A primeira linha de arquivo altera `import adapter from '@sveltejs/adapter-auto';` to `import adapter from '@sveltejs/adapter-static';`

##### Coloque o SvelteKit no modo SPA com pré-renderização.

- Crie um arquivo sob myapp/frontend/src/routes/ chamado +layout.ts/+layout.js.
- Adicione duas linhas ao recém-criado arquivo `export const prerender = true` e `export const ssr = false`

##### Testar instalação.

- Navegue de volta à raiz do projeto Wails (um diretório para cima).
- execute `wails dev`
- Se a aplicação não executar, por favor verifique os passos anteriores.

## 2. Script de Instalação

##### Este Script do Bash faz as etapas listadas acima.  Certifique-se de ler o script e de entender o que o script está fazendo no seu computador.

- Criar um arquivo sveltekit-wails.sh
- Copie o código abaixo para o novo arquivo e o salve.
- Torná-lo executável com `chmod +x sveltekit-wails.sh`
- A marca é um parâmetro opcional abaixo que adiciona de volta na marca de fregueses.  Deixe o terceiro parâmetro em branco para não inserir a marca das Wails.
- Exemplo de uso: `./sveltekit-wails.sh pnpm newapp brand`

##### sveltekit-wails.sh:

```
manager=$1
project=$2
brand=$3
wails init -n $project -t svelte
cd $project
sed -i "s|npm|$manager|g" wails.json
sed -i 's|"auto",|"auto",\n  "wailsjsdir": "./frontend/src/lib",|' wails.json
sed -i "s|all:frontend/dist|all:frontend/build|" main.go
if [[ -n $brand ]]; then
	mv frontend/src/App.svelte +page.svelte
	sed -i "s|'./assets|'\$lib/assets|" +page.svelte
	sed -i "s|'../wails|'\$lib/wails|" +page.svelte
	mv frontend/src/assets .
fi
rm -r frontend
$manager create svelte@latest frontend
if [[ -n $brand ]]; then
	mv +page.svelte frontend/src/routes/+page.svelte
	mkdir frontend/src/lib
	mv assets frontend/src/lib/
fi
cd frontend
$manager i
$manager uninstall @sveltejs/adapter-auto
$manager i -D @sveltejs/adapter-static
echo -e "export const prerender = true\nexport const ssr = false" > src/routes/+layout.ts
sed -i "s|-auto';|-static';|" svelte.config.js
cd ..
wails dev
```

## 3. Notas importantes

##### Os arquivos do servidor causarão falhas de construção.

- \+layout.server.ts, +page.server.ts, +server.ts ou qualquer arquivo com "server" em nome falhará na construção enquanto todas as rotas forem pré-renderizadas.

##### O tempo de execução do Wails descarrega com navegações de página inteira!

- Tudo que causa navegações de página completa: `window.location.href = '/<some>/<page>'` ou recarga do menu de contexto ao usar wails dev.  Isso significa que você pode acabar perdendo a capacidade de chamar qualquer falha no aplicativo em tempo de execução. Há duas formas de trabalhar em torno desta questão.
- Use `import { goto } from '$app/navigation'` e então chame `goto('/<some>/<page>')` em sua + page.svelte. Isso impedirá uma navegação de página completa.
- Se a navegação por página inteira não puder ser impedido que o tempo de execução do Wails seja adicionado a todas as páginas, adicionando o abaixo ao `<head>` de myapp/frontend/src/app. Mt

```
<head>
...
	<meta name="wails-options" content="noautoinject" />
	<script src="/wails/ipc.js"></script>
	<script src="/wails/runtime.js"></script>
...
</head>
```

Veja https://wails.io/docs/guides/frontend para mais informações.

##### Initial data can be loaded and refreshed from +page.ts/+page.js to +page.svelte.

- \+page.ts/+page.js funciona bem com o load() https://kit.svelte.dev/docs/load#page-data
- invalidateAll() em +page.svelte irá chamar load() de +page.ts/+page.js https://kit.svelte.dev/docs/load#rerunning-load-functions-manual-invalidation.

##### Tratamento de erros

- Erros esperados usando o erro Throw funcionam em +page.ts/+page.js com uma página +error.svelte. https://kit.svelte.dev/docs/errors#expected-errors
- Erros inesperados farão com que o aplicativo se torne inutilizável.  Somente a opção de recuperação (conhecida até agora) de erros inesperados é recarregar o aplicativo.  Para fazer isso, crie um arquivo myapp/frontend/src/hooks.client.ts e adicione o código abaixo ao arquivo.

```
import { WindowReloadApp } from '$lib/wailsjs/runtime/runtime' 
export async function handleError() {
	WindowReloadApp()
}
```

##### Usando formas e funções de manipulação

- A maneira mais simples é chamar uma função do formulário é o padrão, vincular:valor suas variáveis e evitar submissão `<form method="POST" on:submit|preventDefault={handle}>`
- A maneira mais avançada é use:enhance (aprimoramento progressivo) que permitirá acesso conveniente a formData, formElemento, emissor.  A nota importante é sempre cancel() o formulário que impede o comportamento do lado do servidor.  https://kit.svelte.dev/docs/form-actions#progressive-enhancement Exemplo:

```
<form method="POST" use:enhance={({cancel, formData, formElement, submitter}) => {
	cancel()
	console.log(Object.fromEntries(formData))
	console.log(formElement)
	console.log(submitter)
	handle()
}}>
```
